<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function $(id) {
            return document.getElementById(id);
        }

        function checkName() {
            //定义正则表达式
            var rex = /^[a-zA-Z]{2,20}$/;
            //判断文本框内容是否匹配正则表达式
            if (rex.test($("userName").value)) {
                $("nameSpan").innerHTML = "验证通过";
                $("nameSpan").style.color = "green";
                return true;
            } else {
                $("nameSpan").innerHTML = "用户名必须是2-20个字母";
                $("nameSpan").style.color = "red";
                return false;
            }
        }

        function checkPhone() {
            var rex = /^1[358]\d{9}$/;  //(13|15|17|18)
            if (rex.test($("phone").value)) {
                $("phoneSpan").innerHTML = "验证通过";
                $("phoneSpan").style.color = "green";
                return true;
            } else {
                $("phoneSpan").innerHTML = "电话必须以13,15,18开始的11位数";
                $("phoneSpan").style.color = "red";
                return false;
            }
        }

        function checkBirthday() {
            var rex = /^(\d{4})(-)(\d{2})(-)(\d{2})$/;
            if (rex.test($("birthday").value)) {
                $("birthdaySpan").innerHTML = "验证通过";
                $("birthdaySpan").style.color = "green";
                return true;
            } else {
                $("birthdaySpan").innerHTML = "生日格式必须为XXXX-XX-XX";
                $("birthdaySpan").style.color = "red";
                return false;
            }
        }

        function checkPwd() {
            var rex = /^[0-9]{6}$/;
            if (rex.test($("pwd").value)) {
                $("pwdSpan").innerHTML = "验证通过";
                $("pwdSpan").style.color = "green";
                return true;
            } else {
                $("pwdSpan").innerHTML = "密码必须是6位数字";
                $("pwdSpan").style.color = "red";
                return false;
            }
        }

        function checkEmail() {
            var rex = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
            if (rex.test($("email").value)) {
                $("emailSpan").innerHTML = "验证通过";
                $("emailSpan").style.color = "green";
                return true;
            } else {
                $("emailSpan").innerHTML = "电子邮件必须是XX@XX.com格式";
                $("emailSpan").style.color = "red";
                return false;
            }
        }

        function submitForm() {
            if (checkName() & checkPhone()) {  //只能用一个&符号，每个函数返回了一个boolean值
                //提交表单
                $("f1").submit();
            }
        }
    </script>
</head>
<body>
<form action="add" id="f1">
    用户名：<input type="text" name="userName" id="userName" onblur="checkName()">
    <span id="nameSpan"></span><br>

    密码：<input type="password" name="pwd" id="pwd" onblur="checkPwd()">
    <span id="pwdSpan"></span><br>

    电子邮件：<input type="text" name="email" id="email" onblur="checkEmail()">
    <span id="emailSpan"></span><br>

    电话：<input type="text" name="phone" id="phone" onblur="checkPhone()">
    <span id="phoneSpan"></span><br>

    生日：<input type="text" name="birthday" id="birthday" onblur="checkBirthday()">
    <span id="birthdaySpan"></span><br>

    <input type="button" value="提交" onclick="submitForm()">

</form>

</body>
</html>